<div class="d-flex align-items-center mb-3">
    <div class="flex-column">
        <img [attr.src]="'/assets/icons-svg/icon-indicators.svg'" class="indicator-icon mr-3" />
    </div>
    <div class="flex-column">
        <h3 *ngIf="type === 'BaselineIssue'" class="mr-auto">Corporate Governance Pillars</h3>
        <h3 *ngIf="type !== 'BaselineIssue'" class="mr-auto">Management Indicators</h3>
    </div>
</div>

<div class="card card-body shadow">
    <div class="row bold">
        <div class="col-7 offset-5">
            <div class="row">
                <div class="col text-center">Raw Score</div>
                <div class="col text-center">Weight</div>
                <div class="col text-center">Weighted Score</div>
            </div>
        </div>
    </div>

    <!-- MEI/INDICATORS -->
    <div *ngFor="let issue of elements; let i = index;">
        <!-- COMPANY MEI OR STANDARD INDICATOR OF MEI -->
        <company-indicator *ngIf="meiType != 'BaselineIssue' && (currentComponent == 'keyIssues' || (currentComponent == 'meiIndicators' && issue.indicatorType == 0))"
            [getIndicatorFunc]="getIndicatorDetails" [getIndicatorParams]="[serviceUrl, companyId, externalId, issue.code, analyticsService, http]"
            [canExpand]="currentComponent == 'meiIndicators' && issue.indicatorType == 0" [indicator]="issue" [columns]="columns"
            [indicatorIndex]="i + 1" [showAxis]="baseline == undefined && i == 0"
            class="col-md-12" style="width:100%;padding:0px"></company-indicator>

        <!-- CG PILLAR -->
        <pillar-details *ngIf="meiType == 'BaselineIssue'" [canExpand]="currentComponent == 'meiIndicators' && issue.indicatorType == 0" [indicator]="issue" [columns]="columns"
            [indicatorIndex]="i + 1" [showAxis]="baseline == undefined && i == 0" [companyId]="companyId" [externalId]="externalId"></pillar-details>

        <!-- EVENT INDICATORS OF MEI -->
        <event-details id="{{issue.code}}" *ngIf="currentComponent == 'meiIndicators' && issue.indicatorType == 1" [eventIndicator]="issue" [eventIndex]="i+1"
            [companyId]="companyId" [showAxis]="baseline == undefined && i == 0" [noExpand]="issue.category == 0" class="col-md-12" style="width:100%; padding:0px"></event-details>
    </div>

    <div *ngIf="isCore" class="row d-flex align-items-center p-2 mt-2 bg-light-grey" style="font-size:0.875rem">
        <div class="col-5" >Constant*</div>
        <div class="col-7">
            <div class="row">
                <div class="col numeric-column">100</div>
                <div class="col numeric-column">{{ indentPercentile / 100 | percent:'1.1-1' }}</div>
                <div class="col numeric-column">{{ indentPercentile | number:'1.1-1' }}</div>
            </div>
        </div>
    </div>

    <div class="row bold mt-2 p-2 totals-row">
        <div class="col-5">Totals</div>
        <div class="col-7">
            <div class="row">
                <div class="col">&nbsp;</div>
                <div class="col numeric-column">{{ 1 | percent }}</div>
                <div class="col numeric-column">{{ totalScore | number:'1.1-1' }}</div>
            </div>
        </div>
    </div>
    
    <span *ngIf="isCore" class="row mt-2 p-2">        
        * Sustainalytics measures management performance on a focused set of indicators for core companies and applies a constant value to the management score to account for the contribution to management score that would be expected from indicators that are not in use.         
    </span>
</div>
